<template>
  <div class="ui segment">
    <div class="ui  info attached message" v-if='$store.state.isDetail'>
      <p>{{val}}</p>
    </div>
    <template v-else>
      <myenum :param="{}" v-if="enumField.fval!==undefined" :field="enumField" @setVo='setEnum' ></myenum>

      <div v-if="need_target_date>0" class="ui three column grid mypreset_time">
      <fselect class='column' v-if="enum_val_day" fname="day" :val="day" @selectValsChange='selectEvent' label="天" :data="enum_val_day" placeholder="天"></fselect>
      <fselect class='column' v-if="enum_val_hour" fname="hour" :val="hour" @selectValsChange='selectEvent' label="时" :data="enum_val_hour" placeholder="几点"></fselect>
      <fselect class='column' v-if="enum_val_minu" fname="minu" :val="minu" @selectValsChange='selectEvent' label="分" :data="enum_val_minu" placeholder="几分"></fselect>
      </div>
    </template>
  </div>
</template>

<script type="text/ecmascript-6">
  import tool from 'src/util/tool';
  import util from '_util/index';

  import errmsg from 'components/valid/errmsg';
  import fselect from 'components/form/select'
  import myenum from 'components/field/enum';
  const store = util.store

  export default {
    data() {
      return {
        val: '',
        need_target_date: 0,
        enumField:{
          name:'need_target_date',
          title:'是否需要预定日期',
          enum_val:[
            '否','是'
          ]
        },
        day: 0,
        hour: 24,
        minu: 0,
        enum_val_day: null,
        enum_val_hour: null,
        enum_val_minu: null,
      }
    },
    components: {errmsg,fselect,myenum},
    methods: {
      selectEvent(val,fname) {
        this[fname] = val;
        if(fname=='hour')
          this.fix();
      },
      fix(){
        this.enum_val_minu=null;
        let obj = [
          {
            id: '00',
            title: '00'
          },
          {
            id: 30,
            title: 30
          }
        ];
        switch (Number(this.hour)) {
          case 0:
            obj = [
              {
                id: 30,
                title: 30
              }
            ];
            this.minu=30;
            break;
          case 24:
            obj = [
              {
                id: 0,
                title: '00'
              }
            ];
            this.minu='00';
            break;
          default:


        }
        this.enum_val_minu=obj;
      },
      setEnum(name,val){
        this[name]=val;
      },
      setEnumVal(){
        this.enum_val_day = util.proEnumVal(0, 10);
        this.enum_val_hour = util.proEnumVal(0, 24);
        this.enum_val_minu = [
          {
            id: '00',
            title: '00'
          },
          {
            id: 30,
            title: 30
          }
        ];
      }
    },
    watch: {
      need_target_date: function (val, old) {
        this.$emit('setVo', 'need_target_date', val);
      },
      outobj: function (val, old) {
        if (val != old) {
          this.$emit('setVo', this.field.name, JSON.stringify(val))
        }
      },
      hasError: function (val, old) {
        store.push(this, 'setVoError', 'voErrors', this.field.name, this.errors.first(this.field.name))
      }
    },
    computed: {
      placeholder() {
        return `请输入${this.field.title}`
      },
      hasError(){
        return this.errors.has(this.field.name)
      },
      outobj(){
        return {
          day:this.day, hour:this.hour, minu:this.minu
        };
      }
    },
    props: ['field'],
    created() {

      let need_target_date = util.store.get(this, 'editVo.need_target_date');
      this.enumField.fval = need_target_date || 0;
      this.setEnumVal();

      if(this.field.fval){
        let obj = JSON.parse(this.field.fval);

        let {day, hour, minu}=obj;
        this.day=day;
        this.hour=hour;
        this.minu=minu;
      }
    },
    mounted() {
    }
  };
</script>

<style scoped>
  .mypreset_time{
    width:850px;
  }
</style>
